<template>
  <view class="container">
    <uni-forms ref="formRef" :model="formData" :rules="rules">
      <uni-forms-item label="用户名" name="mobile">
        <uni-easyinput v-model="formData.mobile" placeholder="请输入手机号" />
      </uni-forms-item>
      <uni-forms-item label="验证码" name="verify">
        <view class="verify-code-container">
          <uni-easyinput v-model="formData.verify" placeholder="请输入验证码" />
          <button 
            class="verify-code-btn" 
            :disabled="countdown > 0"
            @click="getVerifyCode"
          >
            {{ countdown > 0 ? `${countdown}秒后重试` : '获取验证码' }}
          </button>
        </view>
      </uni-forms-item>
      <uni-forms-item label="密码" name="password">
        <uni-easyinput v-model="formData.password" type="password" placeholder="请输入密码" />
      </uni-forms-item>
      
      <uni-forms-item label="确认密码" name="confirm_password">
        <uni-easyinput v-model="formData.confirm_password" type="password" placeholder="请再次输入密码" />
      </uni-forms-item>
      

      
      
      
      <button class="submit-btn" @click="submitForm">注册</button>
    </uni-forms>
  </view>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import {handleVerifyCode, SignUpParams,handleSignUp} from '@/api/sign'
import { ResponseResult } from '@/utils/request'
const formRef = ref()

const formData = reactive<SignUpParams>({
  password: '',
  confirm_password: '',
  mobile: '',
  verify: ''
})

const countdown = ref(0)

const rules = {
  mobile: {
    rules: [
      { required: true, errorMessage: '请输入手机号' },
      { pattern: /^1[3-9]\d{9}$/, errorMessage: '手机号格式不正确' }
    ]
  },
  verify: {
    rules: [
      { required: true, errorMessage: '请输入验证码' },
      { length: 6, errorMessage: '验证码长度应为6位' }
    ]
  },
  password: {
    rules: [
      { required: true, errorMessage: '请输入密码' },
      { minLength: 6, errorMessage: '密码不能少于6个字符' }
    ]
  },
  confirm_password: {
    rules: [
      { required: true, errorMessage: '请再次输入密码' },
      {
        validateFunction: (rule: any, value: string, data: SignUpParams) => {
          return data.password === value || '两次输入的密码不一致'
        }
      }
    ]
  }
}

const submitForm = async () => {
  try {
    const valid = await formRef.value.validate()
    if (valid) {
      console.log('表单数据：', formData)
      // TODO: 在这里添加注册逻辑
      handleSignUp(formData).then((res: ResponseResult) => {
        console.log(res)
        if (res && res.status == 1) {
          uni.showToast({
            title: '注册成功',
            icon: 'success'
          })
          setTimeout(() => {
            uni.navigateTo({
              url: '/pageSign/login'
            })
          }, 1500)
        }
      })
      
    }
  } catch (err) {
    console.error('表单验证失败：', err)
  }
}

const getVerifyCode = async () => {
  try {
    await formRef.value.validateField('mobile')
    
    countdown.value = 60
    const timer = setInterval(() => {
      countdown.value--
      if (countdown.value <= 0) {
        clearInterval(timer)
      }
    }, 1000)
    
    handleVerifyCode({mobile: formData.mobile}).then((res:any) => {
      if (res && res.status) {
        uni.showToast({
          title: '验证码已发送',
          icon: 'success'
        })
      }
    })
    
  } catch (err) {
    console.error('手机号验证失败：', err)
  }
}
</script>

<style lang="scss">
.container {
  padding: 20px;
}

.verify-code-container {
  display: flex;
  align-items: center;
  gap: 10px;
  
  :deep(.uni-easyinput) {
    flex: 1;
  }
}

.verify-code-btn {
  width: 200rpx;
  font-size: 14px;
  padding: 0 10px;
  white-space: nowrap;
  background-color: #00B26A;
  color: #fff;
  
  &:disabled {
    background-color: #ccc;
  }
}
</style>